<template>
  <view class="page-container">
  <NavBar showBack floating title="我的车辆"></NavBar>
  <swiper v-if="carList.length > 0" class="swiper-box" :current="swiperIndex" @change="onSwiperChange" circular
    :duration="500">
    <swiper-item v-for="(itm, idx) in carList" :key="idx">
      <scroll-view scroll-y class="page-scroll">
        <view class="mycar-banner">
          <!-- <ImgIcon class="banner-img" size="100%*100%" src="static/operation/my-car.png"></ImgIcon> -->
          <image class="banner-img" :src="itm.car?.car_model_images ? itm.car.car_model_images[0] : ''" mode="aspectFit"></image>
          <cover-view class="dots" v-if="carList.length > 1">
            <cover-view v-for="(_, idx) in carList" :class="`${swiperIndex === idx && 'active'} dot`"
              :key="idx"></cover-view>
          </cover-view>
        </view>
        <view class="mycar-page" v-if="itm">
          <view class="mycar-content cardetail-bg">
            <ImgIcon class="car-img" size="348*814" src="static/operation/pic-car.png"></ImgIcon>
            <view class="content-item">
              <view class="item-tit">车型</view>
              <view class="item-count">{{ itm?.car.car_title }}</view>
            </view>
            <view class="content-item">
              <view class="item-tit">车架号</view>
              <view class="item-count">{{ itm?.car.car_frame_number }}</view>
            </view>
            <!-- <view class="content-item">
              <view class="item-tit">门店</view>
              <view class="item-count">
                <text>{{ itm?.shop.name }}</text>
                <image class="address-icon" :src="getImageSrc('static/icons/icon-subtract.png')"></image>
                <text>{{ km(itm?.shop.distance) }}km</text>
              </view>
            </view> -->
            <!-- <view class="content-item">
              <view class="item-tit">电话</view>
              <view class="item-count">{{ itm?.shop.phone }}</view>
            </view> -->
            <view class="content-item">
              <view class="item-tit">车牌</view>
              <view class="item-count">
                <input class="count-ipt" :disabled="disabledEditPlate" :focus="!disabledEditPlate"
                  v-model="itm.car.plate_number" />
                <!-- <text class="count-edit" @click="onEditPlate">{{ disabledEditPlate ? "编辑" : "保存" }}</text> -->
              </view>
            </view>
            <view class="content-item">
              <view class="item-tit1" @click="onEditPlate">{{ disabledEditPlate ? "编辑" : "保存" }}</view>
              <view class="item-count">
              </view>
            </view>
            <view class="content-btn" @click="toAppointment">我要保养/维修</view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
  <view class="nodata-page" v-else>
    <NoData :list="carList" title="您还没有绑定车辆" :total="carList.length" />
  </view>
</view>
</template>


<script setup>
import { ref } from "vue"
import NavBar from "@/components/ui/nav-bar"
import service from "@/path/service"
import { getUserLocation } from "@/path/location";
import NoData from "@/components/tool/no-data"
import { router } from "@/path/router";
import ImgIcon from "@/components/ui/img-icon"
import { getImageSrc } from '@/path/until';
const disabledEditPlate = ref(true)
const carList = ref([])
function km(_num = 0) {
  return _num.toFixed(2)
}
const swiperIndex = ref(0)
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
function onEditPlate() {
  disabledEditPlate.value = !disabledEditPlate.value
  if (!disabledEditPlate.value) return
  const _item = carList.value[swiperIndex.value]
  if (!_item) return
  if (!_item.car.plate_number) {
    uni.showToast({
      title: "请输入车牌号",
      icon: "none"
    })
    return
  }
  service.post("api/ycg/usercenter/updatecarplatenumber", {
    plateNumber: _item.car.plate_number,
    carFrameNumber: _item.car.car_frame_number,
  })
}
getUserLocation().then((res) => {
  return service.get("api/ycg/usercenter/mycarlist", {
    lat: res.latitude,
    lng: res.longitude,
  })
}).then((res) => {
  carList.value = res || []
  // carList.value = [
  //   {
  //     "car": { "brand_name": "奥迪1", "series_name": "奥迪A4", "car_title": "奥迪滴滴滴1", "images": ["https://oss.dwicoud.com/uploads/20230414/ffb0ee7844bc107e21ed69520d10139b.jpg", "https://oss.dwicoud.com/uploads/20230414/59632b4c7e7084eb4345ad0d46bd4835.jpg"], "car_type": 1, "name": "奥迪1102", "plate_number": "贵A56651", "car_frame_number": "AcJ56612111141", "car_color": "黑", "skutime_text": "" },
  //     "shop": { "logo": "https://oss.dwicoud.com/uploads/20230420/8541b19c43577e1eb44e91ab17c1f402.jpg", "name": "招商媒介", "phone": "15902154655", "address": "福建省厦门市集美区龙船路", "lng": 118.098457, "lat": 24.564489, "distance": 1172.5254366653537 }
  //   },
  //   {
  //     "car": { "brand_name": "奥迪2", "series_name": "奥迪A4", "car_title": "奥迪滴滴滴2", "images": ["https://oss.dwicoud.com/uploads/20230414/ffb0ee7844bc107e21ed69520d10139b.jpg", "https://oss.dwicoud.com/uploads/20230414/59632b4c7e7084eb4345ad0d46bd4835.jpg"], "car_type": 1, "name": "奥迪1102", "plate_number": "贵A56651", "car_frame_number": "BcJ56612111142", "car_color": "黑", "skutime_text": "" },
  //     "shop": { "logo": "https://oss.dwicoud.com/uploads/20230420/8541b19c43577e1eb44e91ab17c1f402.jpg", "name": "招商媒介", "phone": "15902154655", "address": "福建省厦门市集美区龙船路", "lng": 118.098457, "lat": 24.564489, "distance": 1172.5254366653537 }
  //   },
  //   {
  //     "car": { "brand_name": "奥迪3", "series_name": "奥迪A4", "car_title": "奥迪滴滴滴3", "images": ["https://oss.dwicoud.com/uploads/20230414/ffb0ee7844bc107e21ed69520d10139b.jpg", "https://oss.dwicoud.com/uploads/20230414/59632b4c7e7084eb4345ad0d46bd4835.jpg"], "car_type": 1, "name": "奥迪1102", "plate_number": "贵A56651", "car_frame_number": "CcJ56612111143", "car_color": "黑", "skutime_text": "" },
  //     "shop": { "logo": "https://oss.dwicoud.com/uploads/20230420/8541b19c43577e1eb44e91ab17c1f402.jpg", "name": "招商媒介", "phone": "15902154655", "address": "福建省厦门市集美区龙船路", "lng": 118.098457, "lat": 24.564489, "distance": 1172.5254366653537 }
  //   },
  // ]
})
function toAppointment() {
  if (!carList.value[swiperIndex.value]) return
  router.navigate({ url: "/pages/mine/appointment/index" }, {
    data: {
      carFrameNumber: carList.value[swiperIndex.value]?.car.car_frame_number
    }
  })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>

